<template>
       <div>
    <form class="studentForm">
      <input v-model="stuFormData.id" type="hidden" class="studentIdToEdit" />

      <label for="studentName">Name</label>
      <input v-model="stuFormData.name" type="text" name="name" class="studentName" required />

      <label for="studentGender">Gender</label>
      <select v-model="stuFormData.gender" name="gender" class="studentGender" required>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>

      <label for="studentHobbies">Hobbies</label>
      <input
        v-model="stuFormData.hobbies"
        type="text"
        name="hobbies"
        class="studentHobbies"
        required
      />

      <label for="studentEmail">Email</label>
      <input v-model="stuFormData.email" type="email" name="email" class="studentEmail" required />

      <label for="studentPhone">Phone</label>
      <input v-model="stuFormData.phone" type="text" name="phone" class="studentPhone" required />

      <label for="studentAge">Age</label>
      <input v-model="stuFormData.age" type="number" name="age" class="studentAge" required />

      <button @click.prevent="saveStuInfo" type="submit" class="saveStudentBtn">保存信息</button>
    </form>
  </div>   
</template>
    
<script setup lang='ts'>
    import { ref } from 'vue'

export interface IStudent {
  id: string | number
  name: string
  gender: string
  hobbies: string
  email: string
  phone: string
  age: number | string
  create_at?: string
  update_at?: string
  seleted?: boolean
}

export type PIStudent = Partial<IStudent>

const emit = defineEmits<{
  (e: 'save', userInfo: IStudent): void
}>()

const stuFormData = ref<PIStudent>({})

const saveStuInfo = () => {
  console.log(stuFormData.value, 'stuFormData.value')

  emit('save', stuFormData.value as IStudent)
}
</script>
    
<style lang="scss" scoped>
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input,
select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.saveStudentBtn {
  background-color: #4caf50;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  width: 100%;

  &:hover {
    background-color: #45a049;
  }
}
</style>